<template>
    <div class="video">
        <div class="tapTop">
            <button>全部视频</button>
            <div>
                <span @click="getVideo(item, index)" :style="{ color: tapIndex === index ? 'red' : '#fff' }"
                    v-for="(item, index) in videoTapList">{{
                        item.name }}</span>
            </div>
        </div>
        <div class="videoList" v-if="!loading">
            <div class="videoItem" v-for="(item, index) in videoList" :key="index" @click="goVideoDetail(item.data.vid)">
                <div class="videoImg">
                    <img :src="item.data.coverUrl" alt="">
                </div>
                <div class="title">{{ item.data.title }}</div>
                <div class="name">{{ item.data.creator.nickname }}</div>
            </div>
        </div>
        <div style="position: absolute;top: 45vh;width: 75%;background: rgba(0,0,0,0.4);" v-loading="loading"
            element-loading-text="加载歌单列表中🍒...">
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import * as videoAPI from '@/api/video'
interface videoTapList {
    id: number
    name: string
    data: any
}
const router = useRouter()
const videoTapList = ref([] as Array<videoTapList>)
const tapIndex = ref(0)
const videoList = ref([] as Array<videoTapList>)
const loading = ref(false)

onMounted(async () => {
    // 获取视频分类列表
    const { data } = await videoAPI.getPartCateList()
    // 判断请求是否成功
    if (data.code === 200) {
        // 将'全部视频'添加到数据中
        data.data.unshift({ name: '全部视频' })
        // 将数据赋值给videoTapList
        videoTapList.value = data.data
        // 获取推荐视频
        getRecommendVideo()
    }
})

//获取视频列表
const getVideo = async (item: videoTapList, index: number) => {
    // 设置当前选择的索引
    tapIndex.value = index
    // 加载中
    loading.value = true
    // 如果是第一个，则获取推荐视频
    if (index === 0) {
        getRecommendVideo()
        return
    }
    // 获取视频组
    const { data } = await videoAPI.getVideoGroup({ id: item.id })
    // 设置视频列表
    videoList.value = data.datas
    // 加载完成
    loading.value = false
}

//获取推荐视频
const getRecommendVideo = async () => {
    // 设置加载状态为true
    loading.value = true
    // 调用视频API的getRecommendVideo方法，获取数据
    const { data } = await videoAPI.getRecommendVideo()
    // 判断返回状态码是否为200
    if (data.code === 200) {
        // 将获取的数据赋值给videoList
        videoList.value = data.datas
        // 设置加载状态为false
        loading.value = false
    }
}

// 跳转到视频详情页
const goVideoDetail = (id: string) => {
    // 调用router的push方法，跳转到视频详情页
    router.push({ path: '/home/video-detail', query: { id } })
}

</script>

<style lang="scss" scoped>
.video::-webkit-scrollbar {
    display: none;
}

.video {
    width: 80vw;
    height: 82vh;
    margin-top: 8vh;
    display: flex;
    flex-wrap: wrap;
    overflow: auto;

    video {
        width: 46%;
        height: 40vh;
        object-fit: fill;
        margin-right: 2%;
        margin-left: 2%;
    }
}

.tapTop {
    width: 100%;
    height: 10vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    /* border: 1px solid #ccc; */
    color: aliceblue;

    button {
        border-radius: 40px;
        font-size: 10px;
        padding: 5px 10px;
        background: none;
        border: 0.5px solid red;
        color: red;
        font-weight: 100;
        cursor: pointer;
    }

    span {
        margin-right: 10px;
        font-size: 10px;
        cursor: pointer;
    }

}

.videoList {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    /* margin-top: -10vh; */
    /* border: 1px solid #ccc; */
    /* justify-content: space-between; */
    /* border: 1px solid red; */
    .videoItem {
        width: 28%;
        height: 20vh;
        /* border: 1px solid red; */
        margin: 10vh 2.6%;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .title {
        color: aliceblue;
        font-size: 10px;
    }

    .name {
        color: rgba(255, 255, 255, 0.6);
        font-size: 8px;
    }
}
</style>